import { countSlice, asyncMsg } from '../redux/store'
import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux'
import { Spin,Button } from 'antd'
import { RootState, AppDispatch } from '../redux/store'

const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
const useAppDispatch = () => useDispatch<AppDispatch>()
export default function Count() {
  const dispatch = useAppDispatch()
  const state = useAppSelector((state: any) => {
    return state.count
  })
  return (
    <div>
      <Spin spinning={state.loading}></Spin>
      <h3>{state.count}</h3>
      <h3 style={{ color: state.color }}>{state.msg}</h3>
      <Button
        onClick={() => {
          dispatch(countSlice.actions.add(5))
        }}
      >
        +
      </Button>
      <Button
        onClick={() => {
          dispatch(countSlice.actions.sub(10))
        }}
      >
        -
      </Button>
      <Button
        onClick={() => {
          dispatch(asyncMsg())
        }}
      >
        异步修改msg
      </Button>
    </div>
  )
}
